<script setup>
import {Operation} from "@element-plus/icons-vue";

const emit = defineEmits(["currentChange"]);
const props = defineProps({
  treeName: {
    type: String,
    default: null,
  },
  props: {
    type: Object,
    default: null,
  },
  treeData: {
    type: Array,
    default: [],
  },
  nodeKey: {
    type: String,
    default: null,
  },
  checkedKeys: {
    type: String,
    default: null,
  },
});
const treeRef = ref();
const pageData = ref({
  filterText: "",
});
const method = reactive({
  currentChange: (node) => {
    emit("currentChange", node);
  },
  filterNode: (value, data) => {
    if (!value) return true
    return data[props.props?.label].includes(value)
  },
});
watch(() => pageData.value.filterText, (val) => {
  treeRef.value?.filter(val);
});
</script>

<template>
  <div class="tree">
    <div v-show="props.treeName" class="tree-title">
      <el-icon>
        <Operation/>
      </el-icon>
      <span class="title">{{ props.treeName }}</span>
    </div>
    <el-input v-model="pageData.filterText" placeholder="请输入指定名称查询" clearable></el-input>
    <el-tree class="el-tree" ref="treeRef" :props="props.props" :data="props.treeData"
             :node-key="props.nodeKey" :filter-node-method="method.filterNode"
             highlight-current @current-change="method.currentChange"></el-tree>
  </div>
</template>

<style scoped lang="scss">
.tree {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;

  .el-tree {
    margin-top: 5px;
  }

  .tree-title {
    padding: 5px 0 10px 0;
    color: #e78784;
    font-size: 16px;

    span {
      margin-left: 10px;
    }
  }
}
</style>
